<template>
  <div class="vc-page msg-notice-page">
    <!-- 顶部操作栏 -->
    <el-row class="vc-btns">
      <el-button type="primary" size="small" @click="toAddOrEdit()">新增</el-button>

      <el-input v-model="kwdInput" @keyup.enter.native="search()" placeholder="根据标题和内容查询" class="vc-search-input" size="small" clearable>
        <i slot="suffix" class="el-input__icon el-icon-search" @click="search()"></i>
      </el-input>
    </el-row>

    <!-- 列表展示 -->
    <div class="vc-table">
      <tables
        v-model="tableConfig.tableData"
        :columns="tableConfig.columns"
        :stripe="true"/>

      <el-pagination
        :current-page="currentPage"
        :page-size="GLOBAL.QUERY.PAGE_SIZE"
        :total="total"
        @current-change="handleCurrentChange"
        layout="total, prev, pager, next">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import qs from 'qs'

export default {
  name: 'notice',
  data () {
    return {
      // 查询条件
      kwdInput: '',
      params: '',
      // 列表
      tableConfig: {
        columns: [
          {
            type: 'index'
          },
          {
            title: '标题',
            key: 'title',
            minWidth: '100px',
            prefix: row => {
              return row.hasAttmt ? 'vc-icon vc-icon-link' : ''
            },
            link: this.toEditOrDetail
          },
          {
            title: '内容',
            key: 'content',
            minWidth: '200px'
          },
          {
            title: '重要程度',
            key: 'urgency',
            width: '120px',
            formatType: row => this.GLOBAL.formatter.formatTableCol(row.urgency, 'xxtzzycd'),
            class: row => {
              return row.urgency === '2' ? 'urgency-major' : 'urgency-normal'
            }
          },
          {
            title: '状态',
            key: 'state',
            width: '100px',
            formatType: row => this.GLOBAL.formatter.formatTableCol(row.state, 'xxtzzt')
          },
          {
            title: '时间',
            key: 'releaseTime',
            width: '170px',
            prefix: row => {
              return row.state === '2' ? 'vc-icon vc-icon-time' : ''
            },
            formatType: row => this.GLOBAL.formatter.formatDateTime(row.state === '1' ? row.lastTime : row.releaseTime, 'YYYY-MM-DD HH:mm')
          },
          {
            type: 'option',
            width: '110px',
            items: [
              {
                text: '修改',
                isShow: row => {
                  return ['1', '4'].includes(row.state)
                },
                click: this.toAddOrEdit
              },
              {
                text: '删除',
                isShow: row => {
                  return ['1', '4'].includes(row.state)
                },
                click: row => {
                  this.confirm(row, 'removeNoticeById', '删除')
                }
              },
              {
                text: '撤回',
                isShow: row => {
                  return row.state === '3'
                },
                click: row => {
                  this.confirm(row, 'recallNotice', '撤回')
                }
              },
              {
                text: '取消发布',
                isShow: row => {
                  return row.state === '2'
                },
                click: row => {
                  this.confirm(row, 'cancelNotice', '取消发布')
                }
              }
            ]
          }
        ],
        tableData: []
      },
      currentPage: 1,
      total: 0
    }
  },
  activated () {
    this.findNoticeByFuzzyPage()
  },
  methods: {
    /**
     * 加载列表数据
     */
    findNoticeByFuzzyPage (pageNum = this.currentPage, pageSize = this.GLOBAL.QUERY.PAGE_SIZE) {
      this.$api.findNoticeByFuzzyPage({
        data: {
          pageNum: pageNum,
          pageSize: pageSize,
          params: {
            title: this.params,
            content: this.params
          }
        }
      }).then(res => {
        if (!res.success || !res.data.total) {
          this.emptyTableData()
          return
        }
        if (!res.data.records || !res.data.records.length) {
          this.currentPage--
          this.findNoticeByFuzzyPage()
          return
        }
        this.tableConfig.tableData = res.data.records
        this.total = res.data.total
        this.currentPage = res.data.current
      }).catch(() => {
        this.emptyTableData()
      })
    },
    /**
     * 清空表格数据
     */
    emptyTableData () {
      this.tableConfig.tableData = []
      this.total = 0
      this.currentPage = 1
    },
    /**
     * 点击页数
     */
    handleCurrentChange (val) {
      this.findNoticeByFuzzyPage(val)
    },
    /**
     * 查询
     */
    search () {
      this.params = this.GLOBAL.filter.filterSpace(this.kwdInput)
      this.currentPage = 1
      this.findNoticeByFuzzyPage()
    },
    /**
     * 新增/修改
     */
    toAddOrEdit (row = {}) {
      this.$router.push({
        name: 'noticeMaintain',
        params: {
          id: row.id || 'add',
          meta: {
            title: row.id ? '修改通知' : '新增通知'
          }
        }
      })
    },
    /**
     * 修改/详情
     */
    toEditOrDetail (row) {
      let editable = ['1', '4'].includes(row.state)
      this.$router.push({
        name: editable ? 'noticeMaintain' : 'noticeDetail',
        params: {
          id: row.id,
          meta: {
            title: editable ? '修改通知' : '通知详情'
          }
        }
      })
    },
    /**
     * 二次确认
     */
    confirm (row, api, opera) {
      this.$confirmBox(() => { this.handleEvent(row, api, opera) }, `确定${opera}吗？`)
    },
    /**
     * 处理事件
     */
    handleEvent (row, api, opera) {
      this.$api[api]({
        data: qs.stringify({
          id: row.id
        })
      }).then(res => {
        this.findNoticeByFuzzyPage()
        res.success && this.$notifyBox(`${opera}成功`, 'success')
      })
    }
  }
}
</script>

<style lang="less">
.msg-notice-page {
  .vc-btns {
    .vc-search-input {
      width: 280px;
      margin-left: auto;
      .el-icon-search {
        cursor: pointer;
      }
    }
  }
  .el-table {
    .vc-icon.vc-icon-time {
      color: #BEC8C7;
    }
  }
  .tag {
    display: inline-block;
    height: 20px;
    line-height: 20px;
    padding: 0 5px;
    color: #FC4646;
    font-size: 12px;
    background:#FFE5E5;
    border-radius: 3px;
  }
  .urgency-normal {
    .tag;
    color: #66B2F5;
    background:#DBF2FF;
  }
  .urgency-major {
    .tag;
    color: #FC4646;
    background:#FFE5E5;
  }
}
</style>
